<template>
	<view class="BJ">
		<image class="BJimg" src="../../../static/iconqt.png" mode=""></image>
		<view class="centen">
			<!-- 返回按钮 -->
			<image class="fanhui" src="../../../static/iconfanhui.png" mode=""></image>
			<!-- 过期时间 -->
			<view class="dingshi fs10">
				<text>距红包过期还有</text>
				<text style="margin-left: 20rpx;">23:59:29</text>
			</view>
			<!-- 金额 -->
			<view class="jine">	100	</view>
			<!--  -->
			<view class="bottom">
				<view>
					<image src="../../../static/iconhb2766.png" mode=""></image>
					<text class="fs10">差1.2元</text>
					<span></span>
				</view>
			</view>
			<!-- 分享好友 领取现金 -->  
			<view class="FXbtn"></view>
			<!-- 好友晒单 -->
			<view class="w342">
				<view class="w342-top" style="height: 100rpx;display: flex;text-align: center;line-height: 100rpx;">
					<view><text :class="tixian==true?'borderBottom':''" @click="tixian=true">好友晒单</text></view>
					<view><text :class="tixian==false?'borderBottom':''" @click="tixian=false">提现记录</text></view>
				</view>
				<!-- 好友晒单 -->
				<view v-if="tixian" class="list w342-top" style="height: 148rpx;margin-top: 20rpx;position: relative;" v-for="item in 6">
					<image src="../../../static/22.png" mode=""></image>
					<div class="haoyou fs10">好友</div>
					<view class="w80">
						<view class="fs12">
							<text>朋克大人</text>
						</view>
						<view class="fs10">2020.12.26</view>
						<view class="fs10" style="word-wrap: break-word;margin-top: 20rpx;">
							邀请了8名好友，获取100元现金红包，商家已发放							``														
						</view>
					</view>
					<span class="sanjiao"></span>
					<text class="jia100 fs10">+100</text>
				</view>
				<!--  提现记录-->
				<view v-else class="list w342-top" style="height: 148rpx;margin-top: 20rpx;position: relative;">
					<image src="../../../static/22.png" ></image>
					<view class="w80">
						<view class="fs12">
							<text>一枝独秀</text>
						</view>
						<view class="fs10" style="position: relative;">2020.12.26 
							<text class="fs12" style="position: absolute;right: 8%;">已获取 100元</text> 
						</view>
						<view class="fs10" style="word-wrap: break-word;margin-top: 20rpx;">
							邀请了8名好友，获取100元现金红包，商家已发放							``														
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tixian:true
			}
		},
		methods: {

		}
	}
</script>

<style>
	.BJ {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.BJimg {
		width: 750rpx;
		height: 1624rpx;
		position: absolute;
		top: 0;
	}

	.fanhui {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		left: 64rpx;
		top: 82rpx;
	}

	.dingshi {
		color: #FFFFFF;
		position: absolute;
		top: 220rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bottom {
		width: 492rpx;
		height: 14rpx;
		background: rgba(255, 210, 52, 1);
		border-radius: 8rpx;
		position: absolute;
		top: 548rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bottom>view {
		width: 134rpx;
		height: 48rpx;
		background: rgba(255, 210, 52, 1);
		border-radius: 8rpx;
		position: absolute;
		top: -70rpx;
		right: 0;
	}

	.bottom>view>image {
		width: 24rpx;
		height: 30rpx;
		position: absolute;
		top: 8rpx;
		left: 20rpx;
	}

	.bottom>view>text {
		color: rgba(245, 64, 68, 1);
		transform: scale(0.8);
		position: absolute;
		top: 10rpx;
		left: 40rpx;
	}

	.bottom>view>span {
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-top: 8px solid rgba(255,210,52,1);
		position: absolute;
		right: 40%;
		bottom: -15rpx;
	}
	.jine{
		width: 240rpx;
		height: 156rpx;
		font-size: 140rpx;
		color: rgba(245,64,68,1);
		background: #FFFFFF;
		position: absolute;
		top: 330rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.FXbtn{
		width: 500rpx;
		height: 70rpx;
		position: absolute;
		top: 655rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.w342{
		width: 684rpx;
		height: 650rpx;
		background: #FEC68A;
		overflow: scroll;
		position: absolute;
		top: 880rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.w342-top{
		width: 90%;
		margin: 0 auto;
	}
	.w342-top>view{
		width: 50%;
		color: rgba(251,249,212,1);
	}
	.borderBottom{
		padding: 10rpx 0;
		border-bottom: 8rpx solid rgba(251,249,212,1);
	}
	.list{
		background: rgba(253,107,47,1);
	}
	.list>image{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		position: absolute;
		left: 34rpx;
		top: 22rpx;
	}
	.w80{
		width: 100%!important;
		height: 108rpx;
		transform: scale(0.8);
		position: absolute;
		left: 60rpx;
		top: 30rpx;
	}
	.jia100{
		display: block;
		width: 78rpx;
		height: 28rpx;
		text-align: center;
		line-height: 28rpx;
		background: rgba(251,225,60,1);
		position: absolute;
		top: 45rpx;
		left: 250rpx;
	}
	.sanjiao{
		display: block;
		border-top: 10rpx solid transparent;
		 border-right: 12rpx solid rgba(251,225,60,1);
		 border-bottom: 10rpx solid transparent;
		 position: absolute;
		 top: 50rpx;
		 left: 240rpx;
	}
	.haoyou{
		width: 74rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 8rpx;
		color: rgba(255,91,0,1);
		background: rgba(251,225,60,1);
		position: absolute;
		top: 0;
		right: 0;
	}
</style>
